<template>
	<view class="content">
		<view class="title">
			<text class="iconfont icon-shop"></text>
			<text>优购生活馆</text>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toItem(item.goodsId)">
				<text class="iconfont" :class="item.checked ? 'icon-checkboxround1' : 'icon-checkboxround0'" @click.stop="toggleCheck(item)"></text>
				<image :src="item.goods_small_logo" alt="" />
				<view class="right">
					<text class="text-line2">{{item.goods_name}}</text>
					<view class="btm">
						<text class="price">￥<text>{{item.goods_price}}</text>.00</text>
						<view class="goods-num">
							<button @click.stop="subNum(item,index)">-</button>
							<text>{{item.num}}</text>
							<button @click.stop="addNum(item)">+</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="account">
			<view class="select-all" @click.stop="toggleAll">
				<text class="iconfont " :class="isAll ? 'icon-checkboxround1' :'icon-checkboxround0'"></text>
				<text>全选</text>
				<view class="price-wrapper">
					<view class="price">
						<view>合计:<text class="num">￥{{totalPrice}}.00</text></view>
						<text class="info">包含运费</text>
					</view>
					<view class="account-btn" @click.stop="toPay">结算({{totalNum}})</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				goodsList:[]
			}
		},
		computed:{
			isAll:{
				get(){
					// 3.所有商品都勾选,返回true,否则返回false
								return this.goodsList.every(item=>{
									return item.checked
								})
								},
				set(status){
					this.goodsList.forEach(item=>{
						item.checked = status
						
					})
				}
			},
			// 总数量计算：reduce
			totalNum(){
				return this.goodsList.reduce((sum,item)=>{
					return sum + (item.checked ? item.num :0)
				},0)
			},
			// 总价格计算
			totalPrice(){
				// 选中的商品数量*商品价格之和
				return this.goodsList.reduce((sum,item)=>{
					return sum +(item.checked ? item.num * item.goods_price : 0)
				},0)
			}
		},
		onShow () {
			// 获取本地数据
			this.cartData = uni.getStorageSync('cartData') || []
		   // 如果storage cart不为空的,才发请求
		  		if (this.cartData.length) {
		  			this.getGoodsList();
		  		}
			}, 
		onHide () {},
			methods:{
				// 跳转至支付页面
				toPay(){
					// 如果没有商品 则提示并返回
					if(!this.totalNum){
						uni.showToast({
							title:'当前没有商品！',
							icon:'none'
						})
						return
					}
					uni.navigateTo({
						url:'/pages/pay/pay'
					})
				},
				
				// 获取商品列表详情
				 
				 async getGoodsList () {
					 
				   // 数据为空？return
				   // if (!this.cartData.length) {
				   //   return
				   // }
					 // 获取本地数据的各项id值
				   let goodsIdArr = this.cartData.map(item => {
				     return item.goodsId
				   })
					 console.log(goodsIdArr)
					 //转为字符串 join
					  let goodsIds = goodsIdArr.join(',')
						// 请求
					 let _goodsList = await this.$request({
					 	url: '/api/public/v1/goods/goodslist?goods_ids=' + goodsIds
					 })
					 console.log(_goodsList)
					 //  请求结束后，把两个数组合并
					 this.goodsList = this.cartData.map(item => {
					 	//在goodsList找一项goodsId为item.goodsId
					 	let targetGoods = _goodsList.find(p => {
					 		return p.goods_id === item.goodsId;
					 	});
					 	// 把cartData元素和在goodsList的goodsId相等的目标元素合并
					 	//对象展开合并
					 	return { ...item, ...targetGoods};
					 });
				 },
				// 商品增加
				addNum(item){
					item.num++
				},
				// 商品减少
				subNum(item,index){
					// 如果item为1时 删除这一项
					if(item.num === 1){
							uni.showModal({
								title:'提示',
								content:'你确定要删除商品吗？',
								success: res => {
									if(res.confirm){
										this.goodsList.splice(index,1)
									}
									
								}
							})
							return
					}
					item.num--
				},
				// 跳转商品详情
				toItem(goodsId){
					uni.navigateTo({
						url:'/pages/item/item?goodsId='+goodsId
					})
				},
				// 点击商品勾选按钮
				toggleCheck(item){
					item.checked = !item.checked
				},
				// 全选状态
				toggleAll(){
					this.isAll = !this.isAll
				}
			}
		
	}
</script>
<style lang="less">
	.iconfont {

		font-size: 40rpx;
	}

	.title {
		height: 88rpx;
		display: flex;
		align-items: center;

		.iconfont {
			color: #999;
			margin: 6rpx 12rpx 0 32rpx;
		}
	}

	.goods-item {
		height: 206rpx;
		background-color: #fff;
		border-top: 1rpx solid #ddd;
		display: flex;
		box-sizing: border-box;
		align-items: center;
	

		.iconfont {
			color: #eb4450;
			margin: 0 30rpx;
		}

		image {
			width: 160rpx;
			height: 160rpx;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin: 0 20rpx 0 18rpx;

			.btm {
				display: flex;
				margin-top: 40rpx;
				justify-content: space-between;

				.price {
					color: #eb4450;
					display: flex;

					>text {
						font-size: 24px;
					}
				}

				.goods-num {
					display: flex;
					align-items: center;

					button {
						width: 60rpx;
						height: 50rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 4rpx solid #666;
					}

					text {
						margin: 0 30rpx;
					}
				}
			}
		}
	}

	.goods-list {
		position: absolute;
		bottom: 98rpx;
		top: 88rpx;
		width: 100%;
		overflow: auto;
		padding-bottom: 60rpx;
		background-color: #f4f4f4;
	}

	.account {
		height: 98rpx;
		border-bottom: 1rpx solid #ddd;
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		align-items: center;

		.iconfont {
			color: #eb4450;
			margin: 0 30rpx;
		}

		.account-btn {
			width: 230rpx;
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background-color: #eb4450;
		}

		.select-all {
			flex: 1;
			display: flex;
			align-items: center;
			.price-wrapper {
				display: flex;
				flex: 1;
				justify-content: flex-end;
				align-items: center;
			}
		}

		.price {
			margin-right: 20rpx;

			.num {
				color: #eb4450;
			}

			.info {
				color: #999;
			}
		}
	}
</style>
